<template>
  <div>
    <el-row
      type="flex"
      v-for="(rowNum, rowIndex) in totalRowNum"
      :key="rowIndex"
    >
      <div
        class="margin_right"
        v-for="(item, index) in imgList.slice(
          rowIndex * colNumOfRow,
          rowNum * colNumOfRow
        )"
        :key="item.url + index"
        :span="24 / colNumOfRow"
      >
        <el-image
          style="width: 100px; height: 100px"
          :src="item.url"
          :preview-src-list="[item.url]"
          :z-index="imageZindex"
          fit="cover"
          append-to-body
        >
        </el-image>
      </div>
    </el-row>
  </div>
</template>
<script>
import ElImage from 'element-ui/packages/image';
import { PopupManager } from 'element-ui/lib/utils/popup';
export default {
  components: { ElImage },
  props: {
    dataSource: {
      type: Array,
      default () { return [] }
    },
    colNumOfRow: { // 每行col数量
      type: Number,
      default: 4
    },
    zIndex: { // 默认遮盖层级
      type: Number,
      default: 2000
    }
  },
  data () {
    return {
      imageZindex: this.zIndex
    }
  },
  computed: {
    imgList () {
      this.reloadZIndex();
      return this.dataSource;
    },
    // 总行数
    totalRowNum () {
      if (this.imgList.length === 0) { return 0 }
      return Math.ceil(this.imgList.length / this.colNumOfRow);
    },
  },
  methods: {
    // 重载image的z-index
    reloadZIndex () {
      this.$nextTick(() => {
        this.imageZindex = PopupManager.zIndex + 1;
      });
    }
  }
}
</script>
<style lang="less" scoped>
.margin_right {
  margin-right: 10px;
}
</style>
